<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .active {
            background: red;
        }
    </style>
</head>
<body>
<div id="box">
    <button @click="fetchData">点击请求数据</button>
    <ul>
        <li v-for="data in dataList">
            {{data.name}} --- {{data.username}} ---- {{data.mobile}}
        </li>
    </ul>

    <div>
        <div>
            <div><input v-model="username">用户名</div>
            <div><input v-model="password">密码</div>
            <div></div>
            <button @click="login">登录</button>
            <button @click="login1">登录1</button>
        </div>
        <div>{{loginMessage}}</div>
    </div>
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                username: "",
                password: "",
                loginMessage: "未登录",
                dataList: []
            }
        },
        methods: {
            fetchData() {
                fetch("http://localhost:8080/user/list")
                    .then(res => res.json()) //请求头,响应头在此处的res中获取
                    .then(res => {
                        this.dataList = res.data
                    })
            },
            login() {
                fetch("http://localhost:8080/user/login", {
                    method: "post",
                    headers: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    body: "username=" + this.username + "&password=" + this.password
                })
                    .then(res => res.json())
                    .then(res => {
                        this.loginMessage = res.message
                        this.password = ""
                    })

            },
            login1() {
                fetch("http://localhost:8080/user/login", {
                    method: "post",
                    headers: {
                        "content-type": "application/json"
                    },
                    // body: '{"username":"' + this.username + '","password":"' + this.password + '"}'
                    body: JSON.stringify({
                        username:this.username,
                        password:this.password
                    })
                })
                .then(res => res.json())
                .then(res => {
                    this.loginMessage = res.message
                    this.password = ""
                })

            }

        }


    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>